<template>
  <div class="index">
    <van-index-bar :index-list="indexTitleList">
      <template v-for="o in indexList">
        <div class="item" :key="o.id">
          <van-index-anchor :index="o.cate_name"></van-index-anchor>
          <div class="child">
            <p v-for="c in o.children" :key="c.id">
              <router-link
                :to="'/goods_list' + `?uid=${c.id}&title=${c.cate_name}`"
              >
                <van-image :src="c.pic" />
                <span>{{ c.cate_name }}</span>
              </router-link>
            </p>
          </div>
        </div>
      </template>
    </van-index-bar>
    <ButtomTab></ButtomTab>
    <Loading
      v-if="indexList.length == 0 || indexTitleList.length == 0"
    ></Loading>
  </div>
</template>

<script>
import ButtomTab from "@/components/ButtomTab";
import Loading from "@/components/Loading";
export default {
  name: "Category",
  data() {
    return {
      indexList: [],
      indexTitleList: []
    };
  },
  created() {
    this.axios.get("/api/category").then(d => {
      this.indexList = d.data.data;
      this.indexTitleList = this.indexList.map(dd => {
        return dd.cate_name;
      });
      console.log(d);
    });
  },
  components: {
    ButtomTab,
    Loading
  },
  methods: {}
};
</script>
<style lang="less">
.index .loading {
  width: 100vw;
  height: 100vh;
  background: rgb(230, 230, 230);
  position: fixed;
  z-index: 50;
  line-height: 100vh;
}
.van-index-bar {
  .van-index-bar__sidebar {
    width: 2rem;
    left: 0px;
    text-align: left;
    top: 0px;
    transform: translateY(0px);
    background: rgb(230, 230, 230);
    height: 100vh;
    span {
      height: 1rem;
      line-height: 1rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      font-size: 0.3rem;
    }
    .van-index-bar__index--active {
      border-left: 2px solid red;
      font-weight: bold;
    }
  }
}
.item {
  padding-left: 2rem;
  margin-bottom: 0.5rem;
  background: white;
  .van-index-anchor {
    font-size: 0.4rem;
    color: rgb(60, 60, 60);
  }
  .child {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    p {
      width: 33%;
      a {
        text-decoration: none;
        .van-image {
          width: 100%;
          height: auto;
        }
        span {
          color: rgb(60, 60, 60);
          font-size: 0.5rem;
        }
      }
    }
  }
}
</style>
